<template>
  <div>
    <titleHead :title="'信息系统资源池排名及上云服务'" />
    <title2 :title="'上云分析'" />
    <el-row :gutter="50">
      <el-col v-for="item in 2" :key="item" :span="12">
       
        <text3 :cockpitData="dataArray[item-1]"/>
      </el-col>
    </el-row>
    <el-col>
      <el-col :span="10">
           <title2 :title="'信息系统资源池排名'" />
        <text1 />
      </el-col>
      <el-col :span="14">
        <Echart
          :options="options"
          :id="'bottomLeftChart' + Math.random()"
          :height="'18rem'"
          width="100%"
        ></Echart>
      </el-col>
    </el-col>
  </div>
</template>

<script>
import Echart from "@/common/echart";
export default {
  data() {
    let that = this;
    return {
      dataArray:[],
      options: {
        xAxis: {
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        grid: {
          left: 80,
          top: 20, // 设置条形图的边距
          right: 80,
          bottom: 20,
        },
        yAxis: [
          {
            type: "category",
            show: true,
            inverse: false,
            data: ["其他", "电信", "移动", "联通"],
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              // 坐标轴刻度标签的相关设置
              show: true,
              margin: 15,
              textStyle: {
                fontSize: 16,
                color: function (value) {
                  return "#25A9F6";
                },
              },
              interval: 0,
            },
            //  yxisLabel: {
            //   // 坐标轴刻度标签的相关设置
            //   show: true,
            //   margin: 15,
            //   textStyle: {
            //     fontSize: 16,
            //     color: function (value) {
            //         debugger
            //       return value == "80%以上"
            //         ? "#25A9F6"
            //         : value == "50%-80%"
            //         ? "#25A9F6"
            //         : "#25A9F6";
            //     },
            //   },
            //   interval: 0,
            // },
            inverse: true,
          },
        ],
        series: [
          {
            // 内
            type: "bar",
            barWidth: 10,
            legendHoverLink: false,
            silent: true,
            itemStyle: {
              normal: {
                // barBorderRadius: [4, 4, 4, 4],
                color: function (params) {
                  console.log(that);

                  //   var colorlist = ["#81D3F8", "#FF6600", "#FF004D"];
                  //   if(params.value>6){
                  //      return "linear-gradient(90deg, #25A9F6 0%, #FFD330 100%)";
                  //   }
                  return new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#25A9F6" }, //柱图渐变色
                    { offset: 0.5, color: "#44C0C1" }, //柱图渐变色
                    { offset: 1, color: "#FFD330" }, //柱图渐变色
                  ]);
                },
              },
            },
            label: {
              normal: {
                show: true,
                position: "right",
                distance: 20, //距离柱形的距离
                // formatter: "{b}",
                textStyle: {
                  color: "inherit", //映射颜色
                  fontSize: 36,
                },
              },
            },
            data: [
              {
                name: "其他",
                value: 5,
              },
              {
                name: "电信",
                value: 18,
              },
              {
                name: "移动",
                value: 7,
              },
              {
                name: "联通",
                value: 9,
              },
            ],
            z: 1,
            animationEasing: "elasticOut",
          },
          {
            // 分隔
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: "#000",
              },
            },
            symbolRepeat: "fixed",
            symbolMargin: 5, //图形的两边间隔
            symbol: "rect",
            symbolClip: true, //是否裁剪图形
            symbolSize: [2, 20],
            symbolPosition: "start", //图形的定位位置。
            symbolOffset: [-2, 0], //图形相对于原本位置的偏移。
            data: [
              {
                name: "80%以上",
                value: 5,
              },
              {
                name: "50%-80%",
                value: 18,
              },
              {
                name: "50%以下",
                value: 7,
              },
            ],
            z: 2,
            animationEasing: "elasticOut",
          },
        ],
      },
    };
  },
   mounted(){
    this.getInfor()
  },
   methods: {
    getInfor() {
      this.getInfo({ key: "8-9-1" }).then(res=>{
            res.cockpitData.map(e=>{
              this.dataArray.push(e)
            })
      });
    },
  },
  components: { Echart },
};
</script>

<style>
</style>